<template>
  <div class="icon_wrapper">
    <table>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-ok"></i>
            </span>
          </div>
          <p>dk-icon-ok</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-cancel"></i>
            </span>
          </div>
          <p>dk-icon-cancel</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-ok-circled"></i>
            </span>
          </div>
          <p>dk-icon-ok-circled</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-cancel-circled"></i>
            </span>
          </div>
          <p>dk-icon-cancel-circled</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-down-open"></i>
            </span>
          </div>
          <p>dk-icon-down-open</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-up-open"></i>
            </span>
          </div>
          <p>dk-icon-up-open</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-right-open"></i>
            </span>
          </div>
          <p>dk-icon-right-open</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-left-open"></i>
            </span>
          </div>
          <p>dk-icon-left-open</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-home"></i>
            </span>
          </div>
          <p>dk-icon-home</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-mail"></i>
            </span>
          </div>
          <p>dk-icon-mail</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-pencil"></i>
            </span>
          </div>
          <p>dk-icon-pencil</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-trash"></i>
            </span>
          </div>
          <p>dk-icon-trash</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-key"></i>
            </span>
          </div>
          <p>dk-icon-key</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-user"></i>
            </span>
          </div>
          <p>dk-icon-user</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-ok-1"></i>
            </span>
          </div>
          <p>dk-icon-ok-1</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-cancel-1"></i>
            </span>
          </div>
          <p>dk-icon-cancel-1</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-progress"></i>
            </span>
          </div>
          <p>dk-icon-progress</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-circle"></i>
            </span>
          </div>
          <p>dk-icon-circle</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-circle-notch"></i>
            </span>
          </div>
          <p>dk-icon-circle-notch</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-files-empty"></i>
            </span>
          </div>
          <p>dk-icon-files-empty</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-folder-download"></i>
            </span>
          </div>
          <p>dk-icon-folder-download</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-folder-upload"></i>
            </span>
          </div>
          <p>dk-icon-folder-upload</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-price-tags"></i>
            </span>
          </div>
          <p>dk-icon-price-tags</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-phone-hang-up"></i>
            </span>
          </div>
          <p>dk-icon-phone-hang-up</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-mobile"></i>
            </span>
          </div>
          <p>dk-icon-mobile</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-forward"></i>
            </span>
          </div>
          <p>dk-icon-forward</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-reply"></i>
            </span>
          </div>
          <p>dk-icon-reply</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-spinner"></i>
            </span>
          </div>
          <p>dk-icon-spinner</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-spinner2"></i>
            </span>
          </div>
          <p>dk-icon-spinner2</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-spinner3"></i>
            </span>
          </div>
          <p>dk-icon-spinner3</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-search"></i>
            </span>
          </div>
          <p>dk-icon-search</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-cog"></i>
            </span>
          </div>
          <p>dk-icon-cog</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-eye"></i>
            </span>
          </div>
          <p>dk-icon-eye</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-eye-blocked"></i>
            </span>
          </div>
          <p>dk-icon-eye-blocked</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-bookmarks"></i>
            </span>
          </div>
          <p>dk-icon-bookmarks</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-vision"></i>
            </span>
          </div>
          <p>dk-icon-vision</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-band"></i>
            </span>
          </div>
          <p>dk-icon-band</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-blood"></i>
            </span>
          </div>
          <p>dk-icon-blood</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-bone"></i>
            </span>
          </div>
          <p>dk-icon-bone</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-chemical"></i>
            </span>
          </div>
          <p>dk-icon-chemical</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-cross"></i>
            </span>
          </div>
          <p>dk-icon-cross</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-dental"></i>
            </span>
          </div>
          <p>dk-icon-dental</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-feet"></i>
            </span>
          </div>
          <p>dk-icon-feet</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-hospital"></i>
            </span>
          </div>
          <p>dk-icon-hospital</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-hygiene"></i>
            </span>
          </div>
          <p>dk-icon-hygiene</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-tooth"></i>
            </span>
          </div>
          <p>dk-icon-tooth</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-veterinarian"></i>
            </span>
          </div>
          <p>dk-icon-veterinarian</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-bodyparts"></i>
            </span>
          </div>
          <p>dk-icon-bodyparts</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-breathing"></i>
            </span>
          </div>
          <p>dk-icon-breathing</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-dna"></i>
            </span>
          </div>
          <p>dk-icon-dna</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-health"></i>
            </span>
          </div>
          <p>dk-icon-health</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-healthcare"></i>
            </span>
          </div>
          <p>dk-icon-healthcare</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-healthy"></i>
            </span>
          </div>
          <p>dk-icon-healthy</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-heartbeat"></i>
            </span>
          </div>
          <p>dk-icon-heartbeat</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-injection"></i>
            </span>
          </div>
          <p>dk-icon-injection</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-molecule"></i>
            </span>
          </div>
          <p>dk-icon-molecule</p>
        </td>
      </tr>
      <tr>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-pill"></i>
            </span>
          </div>
          <p>dk-icon-pill</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-skull40"></i>
            </span>
          </div>
          <p>dk-icon-skull40</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-stomach"></i>
            </span>
          </div>
          <p>dk-icon-stomach</p>
        </td>
        <td>
          <div class="code_effect">
            <span class="icon_font">
              <i class="dk-icon-unhealthy"></i>
            </span>
          </div>
          <p>dk-icon-unhealthy</p>
        </td>
      </tr>
    </table>
  </div>
</template>
<style media="screen">
  .icon_font i{
    font-size:40px;
  }
  .icon_wrapper table {
      border-collapse: collapse;
  }
  .icon_wrapper table tr td{
    font-size:14px;
    text-align:center;
    height:130px;
    width:150px;
    border:1px solid #eeeeee;
  }
</style>
<script type="text/javascript">
  export default {}
</script>
